<template>
    <el-dialog v-model="formDialog" :title="formData.title" :width="formData.width" :before-close="handleClose">
        <div v-if="formData.info" class="fxn-info fxn-margin-b-20" v-html="formData.info"></div>
        <el-form :inline="formData.inline" :model="dialogForm" ref="dialogRef" :rules="dialogRules" :label-width="formData.labelWidth">
            <el-row>
                <el-col v-for="(item,index) in formData.data" :key="index" :span="item.span">
                    <el-form-item :label="item.label" :prop="item.prop" :rules="item.rules">
                        <el-button v-if="item.formType == 'down'" type="primary" plain @click="handleDown(item.downUrl)">下载模板</el-button>
                        <el-input v-if="item.formType == 'input'" :type="item.type" :rows="item.rows" v-model="dialogForm[item.prop]" :maxlength="item.maxlength" :disabled="item.disabled" :placeholder="item.placeholder"></el-input>
                        <el-select v-if="item.formType == 'select'" v-model="dialogForm[item.prop]" :collapse-tags="item.tags" :multiple="item.multiple" :disabled="item.disabled" clearable :placeholder="item.placeholder">
                            <el-option v-for="(items,key) in item.data" :key="items.key" :label="items[item.selectlabel]" :value="items[item.selectvalue]"/>
                        </el-select>
                        <el-cascader v-if="item.formType == 'cascade'" v-model="dialogForm[item.prop]" :options="item.data" :props="item.props" :show-all-levels="false" />
                        <el-date-picker v-if="item.formType == 'datepicker'" v-model="dialogForm[item.prop]" :type="item.type" :default-value="new Date()" :format="item.format" :value-format="item.format" :shortcuts="pickerOptions" :placeholder="item.placeholder" />
                        <UpFiles v-if="item.formType == 'file' " v-model:fileList="dialogForm[item.prop]" :size="item.size" :accept="item.accept" :limit="item.limit"></UpFiles>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" :loading="btnLoading" @click="handleSubmit">确认</el-button>
        </template>
    </el-dialog>
</template>

<script>
    import UpFiles from './UpFiles.vue'
    import { defineComponent, reactive, getCurrentInstance, onMounted, toRefs, computed, watch } from 'vue'
    import { useRouter } from 'vue-router'
    import { useStore } from 'vuex'
    export default defineComponent({
        components: {
            UpFiles,
        },
        props: {
            formData: {
                type: Object,
                default: () => {
                    return {}
                }
            },
        },
        emits: ['update:formDialog','handleDialog'],
        setup(props) {
            const { proxy } = getCurrentInstance();
            const router = useRouter();
            const store = useStore();

            //初始化数据
            const state = reactive({
                //窗口
                formDialog: false,

                //Form
                btnLoading: false,
                dialogRef: '',
                dialogForm: {},
                dialogRules: {},
                pickerOptions: [
                    {
                        text: '今日',
                        value: new Date(),
                    },
                    {
                        text: '昨日',
                        value: () => {
                            const date = new Date()
                            date.setDate(date.getDate() - 1)
                            return date
                        },
                    },
                    {
                        text: '上周',
                        value: () => {
                            const date = new Date()
                            date.setDate(date.getDate() - 7)
                            return date
                        },
                    },
                ]
  
            })

            //模板下载
            const handleDown = (url) => {
                window.open(proxy.PathUrl + url);
            }

            //确认
            const handleSubmit = () => {
                state.dialogRef.validate((valid) => {
                    if(valid){
                        state.btnLoading = true;
                        proxy.$emit('handleDialog', JSON.parse(JSON.stringify(state.dialogForm)));
                        state.btnLoading = false;
                        state.formDialog = false;
                        proxy.$refs.dialogRef.resetFields();
                    }
                })
            }

            //关闭窗口
            const handleClose = () => {
                state.formDialog = false;
                props.formData.model = [];
                proxy.$refs.dialogRef.resetFields();
            }

            //暴露数据
            const openDialog = () => {
                state.formDialog = true;
            }
            
            //Dom加载
            onMounted(()=>{
                
            })

            //数据侦听器
            watch(()=> props.formData,(value)=> {
                //判断是否编辑
                if(value.model){
                    state.dialogForm = value.model;
                }
            })
            
            return {
                ...toRefs(state),
                
                //请求方法
                openDialog,
                handleDown,
                handleSubmit,
                handleClose,
                
                //组件方法
            }

        },
    })
</script>

<style scoped>
    
</style>